<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
				{{collapsed?'':sysName}}
			</el-col>
			<!--<el-col :span="10">-->
				<!--<div class="tools" @click.prevent="collapse">-->
					<!--<i class="fa fa-align-justify"></i>-->
				<!--</div>-->
			<!--</el-col>-->
			<el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner">{{sysUserName}}</span>
					<el-dropdown-menu slot="dropdown">
            <el-dropdown-item><el-button type="text"  @click="dialogFormVisible = true">修改密码</el-button></el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
				<!--导航菜单-->
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
					 unique-opened router v-show="!collapsed">
					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
						<el-submenu :index="index+''" v-if="!item.leaf">
							<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
					</template>
				</el-menu>
				<!--导航菜单-折叠后-->
				<!--<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">-->
					<!--<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">-->
						<!--<template v-if="!item.leaf">-->
							<!--<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>-->
							<!--<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">-->
								<!--<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>-->
							<!--</ul>-->
						<!--</template>-->
						<!--<template v-else>-->
							<!--<li class="el-submenu">-->
								<!--<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>-->
							<!--</li>-->
						<!--</template>-->
					<!--</li>-->
				<!--</ul>-->
			</aside>
			<section class="content-container">
				<div class="grid-content bg-purple-light">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
               {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
					<!--<el-col :span="24" class="breadcrumb-container">-->
						<!--<strong class="title">{{$route.name}}</strong>-->
						<!--<el-breadcrumb separator="/" class="breadcrumb-inner">-->
							<!--<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">-->
								<!--{{ item.name }}-->
							<!--</el-breadcrumb-item>-->
						<!--</el-breadcrumb>-->
					<!--</el-col>-->
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>

    <el-dialog :visible.sync="dialogFormVisible">
      <h3 class="title">修改密码</h3>
      <el-form  :model="addForm" :rules="rules" ref="addForm" >
        <el-form-item prop="pwdone" :label-width="formLabelWidth">
          <el-input  type="password" v-model="addForm.pwdone" auto-complete="off"  placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item prop="pwdtwo" :label-width="formLabelWidth">
          <el-input type="password" v-model="addForm.pwdtwo" auto-complete="off" placeholder="确认密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click.native.prevent="addpwd">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"  >
      <span>{{tips}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="loginagain">取 消</el-button>
        <el-button type="primary" @click="loginagain">确 定</el-button>
      </span>
    </el-dialog>

	</el-row>
</template>

<script>
  import axios from "axios"
  import crypto  from 'crypto';

  export default {
		data() {
			return {
				sysName:'印小七后台',
				collapsed:false,
				sysUserName: '',
        formLabelWidth: '120px',
        dialogFormVisible:false,
        dialogVisible:false,
        tips:"",
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
        addForm: {
          pwdone: '',
          pwdtwo: ''
        },
        rules: {
          pwdone: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          pwdtwo: [
            { required: true, message: '请输入相同的密码', trigger: 'blur' },
            //{ validator: validaePass2 }
          ]
        },
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			handleopen() {
				//console.log('handleopen');
			},
			handleclose() {
				//console.log('handleclose');
			},
			handleselect: function (a, b) {
			},
			//退出登录
			logout: function () {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
				}).then(() => {
					sessionStorage.removeItem('user');
					_this.$router.push('/login');
				}).catch(() => {

				});
			},
      encrypt (str, secret) {
        var cipher = crypto.createCipher('aes192', secret);
        var enc = cipher.update(str, 'utf8', 'hex');
        enc += cipher.final('hex');
        //console.log("enc is: "+enc);
        return enc;
      },
      addpwd(){
          this.$refs.addForm.validate((valid) => {
              if (valid) {
                  if(this.addForm.pwdone == this.addForm.pwdtwo){
                      axios.post("/users/pwdEdit",{
                        addPwd: this.encrypt(this.addForm.pwdtwo,"pwd"),
                        userName: this.sysUserName
                      }).then((ress)=>{
                        let res = ress.data;
                        if(res.status == "0"){
                          this.dialogVisible = true;
                          this.dialogFormVisible=false;
                          this.tips = "修改成功";
                        }else{
                          this.tips = "修改失败";
                        }
                      })
                  } else {
                    //console.log('error submit!!');
                    return false;
                  }
              }
              else {
                //console.log('error submit!!');
                return false;
              }
          });
      },
      loginagain(){
        var _this = this;
        sessionStorage.removeItem('user');
        _this.$router.push('/login');
      },
      // dialogFormVisible(){
      //
      //    this.dialog = !this.dialog;
      // }
			//折叠导航栏
			// collapse:function(){
			// 	this.collapsed=!this.collapsed;
			// },
			// showMenu(i,status){
			// 	this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
			// }
		},
		mounted() {
			var user = sessionStorage.getItem('user');
			//console.log(user)
			if (user) {
				user = JSON.parse(user);
				this.sysUserName = user || '';
			}

		}
	}

</script>

<style scoped lang="scss">
  @import '../styles/vars';
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		.header {
			height: 60px;
			line-height: 60px;
			background: $color-primary;
			color:#fff;
			.userinfo {
				text-align: right;
				padding-right: 35px;
				float: right;
				.userinfo-inner {
					cursor: pointer;
					color:#fff;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}
			.logo {
				//width:230px;
				height:60px;
				font-size: 22px;
				padding-left:20px;
				padding-right:20px;
				border-color: rgba(238,241,146,0.3);
				border-right-width: 1px;
				border-right-style: solid;
				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}
				.txt {
					color:#fff;
				}
			}
			.logo-width{
				width:230px;
			}
			.logo-collapse-width{
				width:60px
			}
			.tools{
				padding: 0px 23px;
				width:14px;
				height: 60px;
				line-height: 60px;
				cursor: pointer;
			}
		}
		.main {
			display: flex;
			// background: #324057;
			position: absolute;
			top: 60px;
			bottom: 0px;
			overflow: hidden;
			aside {
				flex:0 0 230px;
				width: 230px;
				// position: absolute;
				// top: 0px;
				// bottom: 0px;
				.el-menu{
					height: 100%;
				}
				.collapsed{
					width:60px;
					.item{
						position: relative;
					}
					.submenu{
						position:absolute;
						top:0px;
						left:60px;
						z-index:99999;
						height:auto;
						display:none;
					}

				}
			}
			.menu-collapsed{
				flex:0 0 60px;
				width: 60px;
			}
			.menu-expanded{
				flex:0 0 230px;
				width: 230px;
			}
			.content-container {
				// background: #f1f2f7;
				flex:1;
				// position: absolute;
				// right: 0px;
				// top: 0px;
				// bottom: 0px;
				// left: 230px;
				overflow-y: scroll;
				padding: 20px;
				.breadcrumb-container {
					//margin-bottom: 15px;
					.title {
						width: 200px;
						float: left;
						color: #475669;
					}
					.breadcrumb-inner {
						float: right;
					}
				}
				.content-wrapper {
					background-color: #fff;
					box-sizing: border-box;
				}
			}
		}
	}
</style>
